<script setup>

import {getCurrentInstance, ref, watch} from "vue";
import config from "@/utils/config";
import {modifyAvatar} from "@/api/login";

const props = defineProps({
  user: {
    type: Object,
    default: {}
  }
})
const {proxy} = getCurrentInstance();
const formRef = ref();
const formData = ref();
const emit = defineEmits(['success'])
const modalRef = ref();

const handleSubmit = async () => {
  let data = {
    avatar:formData.value.avatar?.uri
  }
  await modifyAvatar(data);
  proxy.$modal.okNotify('修改成功');
  modalRef.value.handleClose();
  emit('success');
}

const editAvatar = () => {
  modalRef.value?.handleOpen();
}

watch(() => props.user, (newVal) => {
  console.log(newVal)
  if (newVal) {
    formData.value = {
      avatar: {uri:newVal.avatar}
    }
  }
}, {immediate: true})
</script>

<template>
  <img :src="`${config.imgDomain}${user.avatar}`" class="rounded-1/2 w-150px h-150px cursor-pointer" @click="editAvatar"/>
  <dialog-form ref="modalRef" modal-title="修改头像" @submit="handleSubmit">
    <a-form ref="formRef" :model="formData" label-width="80px">
      <a-form-item label="用户头像" prop="avatar">
        <file-picker :limit="1" :type="1" v-model="formData.avatar"/>
      </a-form-item>
    </a-form>
  </dialog-form>
</template>

<style scoped lang="scss">

</style>
